<template>
  <div class="flex-wrap mb12 ellipsis history-content">
    <div class="literature ellipsis" v-for="item in historyDataShow">{{ item }}</div>
    <!-- <li class="literature">PLA 材料的定义</li>
    <li class="literature">PLA 材料的定义</li> -->
    <div class="literature" v-if="hasMoreBthHis">
      <span>+{{ historyData.length - historyDataShow.length }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { debounce } from 'lodash';
import { nextTick } from 'vue'
import { onBeforeUnmount } from 'vue'
import { onMounted } from 'vue'
import { ref } from 'vue'

interface Props {
  historyData: any
}
const props = withDefaults(defineProps<Props>(), {
  historyData: []
})
const hasMoreBthHis = ref(false)
const historyDataShow = ref([])

const toggleHistoryData = () => {
  let idx = 0
  let count = 0
  nextTick(() => {
    let ulNode: HTMLDivElement | null = document.querySelector('.history-content')

    if (ulNode != null) {
      let ulChid: NodeListOf<HTMLDivElement> = ulNode.querySelectorAll('.literature') //获取父容器所有子节点
      console.warn(ulChid, 'ulChid')

      ulChid.forEach((i, index) => {
        console.warn(i, 'i741', i.offsetLeft, 'ulNode', ulNode?.offsetLeft)

        if (i.offsetLeft === ulNode?.offsetLeft) {
          count++
          if (count === 2) {
            console.warn(count,'count');
            idx = index - 1
            hasMoreBthHis.value = true
          }
        }
      })
    }
    console.warn(idx,'idx854');
    
    // 超过2行截断数据
    // @todo 一行太长的情况下，idx为0，count大于2，可以只截取一个，后面的不换行
    if (idx > 0 || count >= 2) {
      historyDataShow.value = props.historyData.slice(0, idx)
    } else {
      historyDataShow.value = props.historyData
    }
  })
}

const toggleHistoryDataDebounce =  debounce(() => {
  hasMoreBthHis.value = false
  historyDataShow.value = props.historyData
  toggleHistoryData()
},300)
onMounted(() => {
   historyDataShow.value = props.historyData 
  toggleHistoryData()
  window.addEventListener('resize', toggleHistoryDataDebounce)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', toggleHistoryDataDebounce)
})
</script>

<style lang="scss" scoped>
.history-content {
  width: 100%;
  .literature {
    max-width: 240px;
    padding: 4px 12px;
    background-color: #fff;
    margin-right: 12px;
    border-radius: 192px;
  }
}
</style>
